<template>
	<div :class="prefixCls" class="flex items-center mx-auto" v-if="imgList && imgList.length" :style="getWrapStyle">
		<Badge :count="!showBadge || imgList.length == 1 ? 0 : imgList.length" v-if="simpleShow">
			<div class="img-div">
				<PreviewGroup>
					<template v-for="(img, index) in imgList" :key="img">
						<Image
							:width="size"
							:style="{
								display: index === 0 ? '' : 'none !important',
							}"
							:src="srcPrefix + img"
						/>
					</template>
				</PreviewGroup>
			</div>
		</Badge>
		<PreviewGroup v-else>
			<template v-for="(img, index) in imgList" :key="img">
				<Image :width="size" :style="{ marginLeft: index === 0 ? 0 : margin }" :src="srcPrefix + img" />
			</template>
		</PreviewGroup>
	</div>
</template>
<script lang="ts">
import type { CSSProperties } from 'vue';
import { defineComponent, computed } from 'vue';
import { useDesign } from '@/hooks/web/useDesign';
import { Image, Badge } from 'ant-design-vue';
import { propTypes } from '@/utils/propTypes';

export default defineComponent({
	name: 'TableImage',
	components: { Image, PreviewGroup: Image.PreviewGroup, Badge },
	props: {
		imgList: propTypes.arrayOf(propTypes.string),
		size: propTypes.number.def(40),
		// 是否简单显示（只显示第一张图片）
		simpleShow: propTypes.bool,
		// 简单模式下是否显示图片数量的badge
		showBadge: propTypes.bool.def(true),
		// 图片间距
		margin: propTypes.number.def(4),
		// src前缀，将会附加在imgList中每一项之前
		srcPrefix: propTypes.string.def(''),
	},
	setup(props) {
		const getWrapStyle = computed((): CSSProperties => {
			const { size } = props;
			const s = `${size}px`;
			return { height: s, width: s };
		});

		const { prefixCls } = useDesign('basic-table-img');
		return { prefixCls, getWrapStyle };
	},
});
</script>
<style lang="less">
@prefix-cls: ~'@{namespace}-basic-table-img';

.@{prefix-cls} {
	.ant-image {
		margin-right: 4px;
		cursor: zoom-in;

		img {
			border-radius: 2px;
		}
	}

	.img-div {
		display: inline-grid;
	}
}
</style>
